import {
  Table,
  Row,
  Col,
  Form,
  Input,
  Icon,
  InputNumber,
  Radio,
  DatePicker,
  Select,
  Upload,
  Button,
  Switch,
  Modal,
  Popconfirm,
  Tabs,
  message,
  Steps,
} from 'antd';

import { FormComponentProps } from 'antd/es/form';
import React from 'react';
import SingleDragger from '../../../../../../components/Commons/SingleDragger';
import { connect } from 'dva';
import Constants from '@/utils/Constants';

const R = require('ramda');
const FormItem = Form.Item;

const DeclareAdd = Form.create()(
  class DeclareAdd extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        open: false,
      };
    }

    getForm = () => {
      const { form, dispatch, recordFormValues } = this.props;
      form.validateFields((err, fieldsValue) => {
        if (err) return;
        let flag = true;
        if (flag) {
          let dataSource = {...fieldsValue, ...this.statistics};
          dispatch({
            type:  'customsInfoGenerate/createPrivateCustomer',
            payload: {
              dataSource,
              onSuccess: () => {
                this.handleCancel();
              },
              onFail: () => {
                this.handleCancel();
              },
            },
          });
        }
      });
    };

    handleOpen = () => {
      this.setState({ open: true });
    };

    handleCancel = () => {
      const { dispatch } = this.props;
      this.props.form.resetFields();
      if (this.refs.unapprovalfile) this.refs.unapprovalfile.resetUpload();
      dispatch({ type: 'customsInfoGenerate/queryPrivateCustomersList', payload: {} });
      this.setState({ open: false });
    };

    render() {
      const { getFieldDecorator } = this.props.form;
      const formItemLayout = { labelCol: { sm: { span: 8 } }, wrapperCol: { sm: { span: 14 } } };

      let footer = [];
      footer.push(
        <Button key="cancel" size="large" onClick={this.handleCancel.bind(this)}>
          取消
        </Button>,
      );
      footer.push(
        <Button
          key="submit"
          size="large"
          loading={this.props.loading}
          onClick={() => this.getForm()}
        >
        确认
        </Button>,
      );

      return (
        <Modal
          destroyOnClose
          title="报关抬头新增"
          visible={this.state.open}
          width={800}
          footer={footer}
          onCancel={this.handleCancel}
        >
          <Form>
            <Row>
              <Col span={24}>
                <FormItem label="公司名称(中文)" {...formItemLayout}>
                  {getFieldDecorator('companyname', {
                    rules: [{ required: true, message: '请输入公司中文名称' }],
                  })(<Input placeholder="请填写公司中文名称" />)}
                </FormItem>
              </Col>

              <Col span={24}>
                <FormItem label="公司名称(英文)" {...formItemLayout}>
                  {getFieldDecorator('companynameen', {
                    rules: [{ required: true, message: '请输入公司英文名称' }],
                  })(<Input placeholder="请填写公司英文名称" />)}
                </FormItem>
              </Col>
              <Col span={24}>
                <FormItem label="公司地址(中文)" {...formItemLayout}>
                  {getFieldDecorator('address', {
                    rules: [{ required: true, message: '请输入公司中文地址' }],
                  })(<Input placeholder="请填写公司中文地址" />)}
                </FormItem>
              </Col>
              <Col span={24}>
                <FormItem label="公司地址(英文)" {...formItemLayout}>
                  {getFieldDecorator('addressen', {
                    rules: [{ required: true, message: '请输入公司英文地址' }],
                  })(<Input placeholder="请填写公司英文地址" />)}
                </FormItem>
              </Col>
              <Col span={24}>
                <FormItem label="联系电话" {...formItemLayout}>
                  {getFieldDecorator('telephone', {
                    rules: [{ required: true, message: '请输入联系电话' }],
                  })(<InputNumber placeholder="请填写联系电话" style={{ width: '100%' }} />)}
                </FormItem>
              </Col>
              <Col span={24}>
                <FormItem label="纳税人识别码" {...formItemLayout}>
                  {getFieldDecorator('taxpayerid', {
                    rules: [{ required: true, message: '请输入纳税人识别码' }],
                  })(<InputNumber placeholder="请填写纳税人识别码" style={{ width: '100%' }} />)}
                </FormItem>
              </Col>
            </Row>
          </Form>
        </Modal>
      );
    }
  },
);

function mapStateToProps(state) {
  return {
    loading: state.loading.models.creditFinance,
  };
}

export default connect(mapStateToProps)(DeclareAdd);
